<?
    include './address.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        .box .nav {
            text-align:center;
        }
        ul{
            position: relative;
            display:none;  
        }
        .box {
            width:150px;
        }
        ul > li {
            width:150px;
            list-style-type: none;
            background-color: #fff;
            /* position: absolute; */
        }
        ul > li > a:hover{
            color:white;
            background-color: rgb(30,144,255);
        }
        ul > li > a {
            text-align:center;
            width:auto;
            display:block;
            text-decoration:none;
            color:black;
        } 

    </style>
</head>
<body>
    <select name="" id="">
        <?
            foreach( $address as $provinceId=>$province ){
                ?>
                <option><a href="./address1.php?provinceId=<?echo $provinceId?>"><?echo $province['province_name']?></a></option>
                <?
            }
        ?>
    </select>
    <div class="box">
        <p class="nav">请选择<i class="iconfont"></i></p>
        <ul class="province">
            <?
                foreach( $address as $provinceId=>$province ){
                    ?>
                    <li><a href="./address1.php?provinceId=<?echo $provinceId?>&cityId=<?echo $cityId?>&areaId=<?echo $areaId?>"><?echo $province['province_name']?></a></li>
                    <?
                }
            ?>
        </ul>
    </div>
    
    <script>
        let boxEle = document.querySelector(".box");
        boxEle.onclick = function( event ){
            let e = event || window.event ;
            let target = e.target || e.srcElement ; 
            console.log(target);
            if (target.className == 'nav'){
                boxEle.querySelector(".province").style.display = "block    ";
            } 
        }
    </script>
</body>
</html>